<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>文章详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/articleDetail.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">文章</h1>
		</header>
		<div class="mui-content">
		    <p class="title">这是题目,你知道什么是题目吗？哈哈哈</p>
		    <span class="addInfo"><label id="articleClass">多道安全</label><span id="articleTime">2016-01-03</span></span>
			<p id="articleIndex">生活越来越好，吃的东西也越来越丰富，但是孩子们的身体却日益消瘦。。</p>
			<p id="articleContent">这是正文正文</p>
		</div>
		<div class="footer">
			<input  type="text" placeholder="请输入你想说的..."/>
			<div class="btnBox">
				<a><img src="../../imgs/评论.png" class="footBtn"></a>
				<a><img src="../../imgs/collect1.png" id="collect" class="footBtn"></a>
				<a><img src="../../imgs/shareBtn.png" class="footBtn"></a>
			</div>
			
		</div>
		<script src="../../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
//			mui.plusReady(function(){
//				
//			})
			function getById(id){
				return document.getElementById(id)
			}
			var collectBtn=getById('collect')
			var collectStatus=1;
			collectBtn.addEventListener('tap',function(){
				
				if(collectStatus%2==1){
					mui.alert('收藏成功！');
					this.src="../../imgs/collect2.png"
					collectStatus++;
					collectStatus=collectStatus%2;
				}else{
					mui.alert('取消收藏成功！');
					this.src="../../imgs/collect1.png"
					collectStatus++;
					collectStatus=collectStatus%2;
				}
			})
		</script>
	</body>

</html>